//音频内容content上传到后台
function upload(title,content){
    var xhr=new XMLHttpRequest()
    //由于我们要把声音放在请求体中发送，所以必须使用POST方法
    //这里是ajax发起的请求，所以，后续要怎么处理完全是js决定的
    //所以，这里就不使用 *.do这种url了（*.do主要是给浏览器直接使用的）
    xhr.open('post',`/studio/track/record.json?title=${title}`)//title和type放在queryString中发送
    xhr.onload=function(){
        console.log(this.status)
        console.log(this.responseText)
    }
    xhr.send(content)//将content作为请求体发送出去
}

window.onload=function(){
    if(!navigator.mediaDevices.getUserMedia){
        alert('浏览器过于古老，不支持媒体访问，请更新浏览器')
        return
    }
    var constraints={//设置允许录制音频
        audio:true
    }
    var promise=navigator.mediaDevices.getUserMedia(constraints)

    /*MediaDevices.getUserMedia()返回promise对象成功之后会回调一个MediaStream对象（媒体流对象：包含视频轨道、音频轨道等），
      这里就是指我们授权使用麦克风之后，可以采集到用户的声音输入，麦克风采集到的音频数据会通过这个对象表现出来*/
    //stream的类型就是MediaStream(媒体流)，媒体流中就是我们通过麦克风采集到的声音
    function onSuccess(stream){
        alert('用户授权成功，点击确认开始录制')//alert-弹窗

        var mediaRecorder=new MediaRecorder(stream);//MediaRecorder:用来提供录制的接口
        //绑定如下几个事件：onstart;ondataavailable;onstop
        mediaRecorder.onstart=function(){//onstart用来处理start事件，该事件在屏幕开始录制时触发
            console.log('开始录制')
        }

        var data=[]//放置过程中录制下来的声音数据

        //当开始-结束之间（start和stop之间）的数据可用时该事件会被调用
        mediaRecorder.ondataavailable=function(evt){//处理dataavailable事件，该事件用于获取录制的媒体资源
            console.log('数据可用')
            console.log(evt)
            data.push(evt.data)//evt.data是Blob类型，表示记录下来的声音片段的对象
        }//在start和stop之间，一旦数据可用，就会触发这个数据可用事件的执行

        //当停止录制后（一切完成），该方法被调用
        mediaRecorder.onstop=function(){
            console.log('停止录制')
            console.log(data)

            //blob:大的二进制数据(录制到的所有数据)
            //将一组数据，组成一个统一的数据
            var type="audio/ogg;codecs=opus"
//            var title="测试音频"
            var title=document.querySelector('#title').value.trim()
            var blob=new Blob(data,{
                type:type//类型是死规定
            })
            //将数据生成一个方便播放的url
            var url=URL.createObjectURL(blob)//得到二进制url
            console.log(url)
            //找到audio元素/标签，修改src属性，让页面上的音频播放器可以播放我们录制下来的声音
            var oAudio=document.querySelector('audio')
            oAudio.src=url//url数据给audio标签【url这一段只是做预览功能，让我们方便听到录制的声音而已，不包含在主要作用/流程】

            //上传录制好的音频数据到后台
            upload(title,blob)
        }

        //关于停止:给stop绑定onclick事件，使按下按钮停止录制
        document.querySelector('#stop').onclick=function(){
            mediaRecorder.stop()//按下停止按钮(button)时停止运行
            var o=document.getElementById('stop')
            o.innerHTML='完成录制,点击下方按钮返回创作中心'
        }
        mediaRecorder.start()//开始录制。会触发onstart开始执行.括号设置1000可以让每一秒触发一次数据可用




//        //10s后执行停止录制这个函数，停后会触发onstop的执行
//        setTimeout(function(){
//            mediaRecorder.stop();
//        },10*1000)

//        /*将媒体流拿到的音频直接对接到audio标签上*/
//        var oAudio=document.querySelector('audio')//找到标签
//         //srcObject属性设定或返回一个对象，这个对象提供了一个关联媒体源，这个对象通常是MediaStream
//        oAudio.srcObject=stream//媒体流拿到的音频数据拿给到audio标签
//        //video和audio类似
    }
    function onError(error){
        alert('授权过程中出现错误'+error)
    }
    promise.then(onSuccess).catch(onError)//使用promise当成功时执行onSuccess,失败时执行onError
}